<template>
  <div>
    <h2>MyBox - {{ msg }}</h2>
    <h3>{{ info }}</h3>
    <h3>{{ mmsg }}</h3>
    <button @click="changeFatherMsg">点击修改父组件的 MSG</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "前端老兵",
    };
  },
  // 使用 props 直接接收父组件传递过来的值
  //   props 还可以使用 对象的方式进行接收
  //   props: ["info", "mmsg"],
  props: {
    info: {
      type: String,
      default: "默认值",
    },
    mmsg: {
      type: String,
      default: "默认值",
    },
  },
  created() {
    console.log("created 生命周期");
  },
  methods: {
    changeFatherMsg() {
      // 使用 $emit 触发父组件传递过来的方法，进而实现子传父的操作，可以接收第二个参数
      this.$emit("change-msg", '樱桃小丸子');
    },
  },
};
</script>

<style>
</style>